<template>
	<view>
		<uni-nav-bar :fixed="true" color="#ffffff" :border="false"  background-color="#0A98D5" :status-bar="true" @clickRight="openadd">

			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>

			<!-- 中间 -->
			<view class="nav-tab-bar u-f-ajc">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class=" u-f-ajc ac" :class="{'active':tabIndex==index}" @tap="changetap(index)">
						{{tab.name}}
						<view v-if="(tabIndex==index)" class="nav-tab-bar-line">
						</view>
					</view>

				</block>


			</view>

			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right">
					<view class="icon iconfont icon-bi"></view>
				</view>
			</block>
		</uni-nav-bar>

	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
	export default {
		components: {
			uniNavBar
		},
		props: {

			tabBars: Array,
			tabIndex: Number

		},
		methods: {
			openadd() {
				uni.navigateTo({
					url: '../add-input/add-input'
				})
			},
			changetap(index) {

				this.$emit("changetap", index)
			}
		}
	}
</script>

<style scoped>
	.f {
		display: flex;

	}

	.u-f-ac {
		display: flex;
		align-items: center;
	}

	.u-f-jsb {
		display: flex;
		justify-content: space-between;

	}

	.nav-right>view,
	.nav-left>view {
		font-size: 45upx;
	}

	.nav-right>view {
		color: #576B95;
	}

	.nav-left>view {
		color: #ff9619;
	}

	.nav-left {
		margin-left: 15upx;
	}

	.nav-right {
		width: 1%;

	}

	.nav-tab-bar {
		/* border: 1px solid; */
		width: 100%;
		margin-left: -20upx;
		position: relative;
	}

	.u-afc {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-tab-bar>view {
		/* border: 1px solid; */
		padding: 0 15upx;
		font-size: 35upx;
		font-weight: bold;
		color: #646566;
	}

	.active {
		color: #333333 !important;
	}

	.nav-tab-bar-line {
		margin-top: 30upx;
		position: absolute;
/* 	background-color: red;
 */		border-bottom: 6upx solid #FEDE33;
		border-top: 6upx solid #FEDE33;
		width: 70upx;
		border-radius: 40upx;
	
	}
</style>
